<template>
  <div class="nav">
    <el-row>
      <el-col :span="6">
        <el-menu class="el-menu-vertical-demo" @open="handleOpen" :router="true" default-active="/PersonalCenter"
          @close="handleClose">
          <el-menu-item index="/index/PersonalCenter">
            <i class="el-icon-arrow-right"></i>
            <span slot="title">个人中心</span>
          </el-menu-item>
          <!-- <el-menu-item index="/index/resume-list">
            <i class="el-icon-arrow-right"></i>
            <span slot="title">简历管理</span>
          </el-menu-item> -->
          <el-menu-item index="/index/management">
            <i class="el-icon-arrow-right"></i>
            <span slot="title">申请管理</span>
          </el-menu-item>
          <el-menu-item index="/index/Mycollection">
            <i class="el-icon-arrow-right"></i>
            <span slot="title">我的收藏</span>
          </el-menu-item>
          <el-menu-item index="/index/account">
            <i class="el-icon-arrow-right"></i>
            <span slot="title">账号管理</span>
          </el-menu-item>
          <el-menu-item index="/index/Messagecenter">
            <i class="el-icon-arrow-right"></i>
            <span slot="title">消息中心<i class="read" v-if="read"></i></span>
          </el-menu-item>
          <el-menu-item index="/index/print">
            <i class="el-icon-arrow-right"></i>
            <span slot="title">登记报名</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { checkMsg, checkChat } from '../../api/index'
import bus from '../common/bus'
export default {
  name: 'honmeNav',
  data () {
    return {
      chat: false,
      read: false
    };
  },
  computed: {
    onRoutes () {
      // return this.$route.path
    }
  },
  mounted () {
    this.checkMessage()
    this.checkChat()
    bus.$on('checkMsg', () => {
      this.checkMessage()
    })
  },
  methods: {
    // 查看是否存在未读消息
    checkMessage () {
      checkMsg().then(res => {
        if (res.success) {
          this.read = res.data || false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 查看是否存在未读消息
    checkChat () {
      checkChat().then(res => {
        if (res.success) {
          this.chat = res.data || false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    handleSelect (a, b) {
      console.log(a, b);
      this.onRoutes = a
    },
    handleOpen (key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath);
    }
  },
};
</script>

<style lang="css" scoped>
.nav {
    /* height: 50px; */
    /* background: #ccc; */
    opacity: 1;
    display: inline-block;
}
.el-menu {
    width: 272px;
    padding: 20px;
}
.el-menu .el-menu-item {
    height: 40px;
    line-height: 40px;
    padding-left: 40px !important;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row-reverse;
}
.el-menu .el-menu-item.is-active {
    background: rgba(242, 247, 249, 1);
}
.el-menu .el-menu-item.is-active i {
    color: #0093ff;
}
.read {
    display: inline-block;
    vertical-align: text-top;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgb(226, 83, 83);
    margin-left: 4px;
}
</style>